<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .container {
            margin: 50px;
        }

        .content {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div id="Application">
        <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFliter" />全部
                <input type="radio" :value="0" v-model="sexFliter" />男
                <input type="radio" :value="1" v-model="sexFliter" />女
            </div>
            <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr v-for="(data, index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex == 0 ? '男' : '女'}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script>
        let mock = [
            {
                name: "小王",
                sex: 0
            }, {
                name: "小红",
                sex: 1
            }, {
                name: "小李",
                sex: 1
            }, {
                name: "小张",
                sex: 0
            }
        ]
        const App = Vue.createApp({
            data() {
                return {
                    sexFliter: -1,
                    showDatas: [],
                    searchKey: ""
                }
            },
            mounted() {
                // 模拟请求过程
                setTimeout(this.queryAllData, 3000);
            },
            methods: {
                queryAllData() {
                    this.showDatas = mock
                },
                fliterData() {
                    this.searchKey = ""
                    if (this.sexFliter == -1) {
                        this.showDatas = mock
                    } else {
                        this.showDatas = mock.filter((data) => {
                            return data.sex == this.sexFliter
                        })
                    }
                },
                searchData() {
                    this.sexFliter = -1
                    if (this.searchKey.length == 0) {
                        this.showDatas = mock
                    } else {
                        this.showDatas = mock.filter((data) => {
                            return data.name.search(this.searchKey) != -1
                        })
                    }
                },
            },
            watch: {
                sexFliter(oldValue, newValue) {
                    this.fliterData()
                },
                searchKey(oldValue, newValue) {
                    this.searchData()
                }
            }

        })

        App.mount("#Application") 
    </script>
</body>

</html>